<template>
  <div class="body">
    <div class="book_msg">
      <div>
        <p class="title_box">执行取保候审</p>
        <el-button icon="Plus" size="mini" type="primary" @click="fileVisible = true"
          >加文件</el-button
        >
      </div>
      <div class="msg">

        <div class="box" >
          
          <div class="img">
            <el-image 
            style="width: 100px; height: 120px;border-radius: 10px;"
            src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg" 
            :preview-src-list="['https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg']"/>
            <p><el-icon size="18"><Delete /></el-icon></p>
          </div>
        </div>
      </div>
    </div>

    <!-- 加文件 -->
    <el-dialog v-if="fileVisible" title="" v-model="fileVisible" >
      <update-file></update-file>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, ref } from "vue";
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  mdl: {
    type: Object,
    required: true,
  },
  handleCloseDrawer: {
    type: Function,
    required: true,
  },
});

let fileVisible = ref(false)
</script>

<style lang="scss" scoped>
.title_box{
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin-bottom:15px;
}
.book_msg{
  margin:0 30px;
  margin-top:32px;
  & > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    .title_box {
      margin-bottom: 0;
    }
  }
  .msg{
    background: #F8F8F8;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    padding:20px;
    padding-bottom:20px;
    .box{
      display: inline-block;
      text-align: center;
      .img{
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        p{
          position: absolute;
          bottom:2px;
          right: 0;
          font-size:12px;
          width: 100%;
          height: 26px;
          background: #1F2E54;
          color:#fff;
          cursor: pointer;
          border-bottom-left-radius: 10px;
          border-bottom-right-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
   .el-upload--picture-card{
    border:none;background: none;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 320px;
  }
}
</style>
